import React, { useState } from 'react';
import { Card, Button, Upload, message } from 'antd';
import type { UploadProps } from 'antd';
import { InboxOutlined } from '@ant-design/icons';

const { Dragger } = Upload;

const OneKeyImageMatting: React.FC = () => {
  const [imageUrl, setImageUrl] = useState<string>('');
  const [maskedImageUrl, setMaskedImageUrl] = useState<string>('');
  const [loading, setLoading] = useState<boolean>(false);

  const uploadProps: UploadProps = {
    name: 'file',
    multiple: false,
    action: '/api/upload',
    onChange(info) {
      const { status } = info.file;
      if (status === 'done') {
        message.success(`${info.file.name} 文件上传成功`);
        setImageUrl(URL.createObjectURL(info.file.originFileObj as File));
        setMaskedImageUrl(''); // 重置抠图结果
      } else if (status === 'error') {
        message.error(`${info.file.name} 文件上传失败`);
      }
    },
    onDrop(e) {
      console.log('Dropped files', e.dataTransfer.files);
    },
  };

  const handleMatting = () => {
    if (!imageUrl) {
      message.warning('请先上传图片');
      return;
    }

    setLoading(true);
    // 模拟AI抠图过程
    setTimeout(() => {
      message.success('一键抠图完成');
      // 在实际应用中，这里会使用AI处理后的图片URL
      setMaskedImageUrl(imageUrl);
      setLoading(false);
    }, 3000);
  };

  return (
    <div className="p-4">
      <h2 className="text-xl font-bold mb-4">一键抠图</h2>
      <Card title="上传图片" className="mb-4">
        <Dragger {...uploadProps}>
          <p className="ant-upload-drag-icon">
            <InboxOutlined />
          </p>
          <p className="ant-upload-text">点击或拖拽文件到此区域上传</p>
          <p className="ant-upload-hint">
            支持单个图片文件上传，系统将自动识别主体并移除背景
          </p>
        </Dragger>
      </Card>
      
      {imageUrl && (
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
          <Card title="原图">
            <div className="flex justify-center">
              <img src={imageUrl} alt="原图" className="max-w-full max-h-[400px]" style={{ 
                maxWidth: '100vw', 
                maxHeight: '60vh',
                margin: '0 auto'
              }}  />
            </div>
          </Card>
          <Card title="抠图结果" loading={loading}>
            <div className="flex justify-center">
              {loading ? (
                <div className="text-center py-10">正在进行智能抠图...</div>
              ) : maskedImageUrl ? (
                <img src={maskedImageUrl} alt="抠图结果" className="max-w-full max-h-[400px]" style={{ 
                maxWidth: '100vw', 
                maxHeight: '60vh',
                margin: '0 auto'
              }} />
              ) : (
                <div className="text-center py-10">点击下方按钮开始抠图</div>
              )}
            </div>
          </Card>
        </div>
      )}
      
      {imageUrl && (
        <div className="flex justify-center mb-4">
          <Button type="primary" onClick={handleMatting} loading={loading}>
            开始一键抠图
          </Button>
        </div>
      )}
      
      {maskedImageUrl && (
        <Card title="下载选项">
          <div className="flex justify-center space-x-4">
            <Button>下载透明背景图</Button>
            <Button>下载白色背景图</Button>
            <Button>更换背景</Button>
          </div>
        </Card>
      )}
    </div>
  );
};

export default OneKeyImageMatting;